<template>
    <div class="allbuju">
        <Top/>
       
    
         <div class="block text-center" m="t-4">
 <br>
 <el-carousel trigger="click" height="150px">
 <el-carousel-item v-for="item in items" :key="item">
 <!-- <h3 class="small justify-center" text="2xl">{{ item }}</h3> -->
 <img :src="item.imgurl" style="width:100%">
 </el-carousel-item>
</el-carousel>
</div>
  <!-- <div class="fuwu"> -->
         
             <div class="function">
                <div id="act" class="gongneng2" @click="baoming">
                    <div class="actright"> 
                      <img height="100" width="100" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp9.itc.cn%2Fq_70%2Fimages03%2F20210729%2F54fe36c4c0e34f9c91151c297b691047.jpeg&refer=http%3A%2F%2Fp9.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672487681&t=3f6ace2dd025b1d902663dbf8ad99782">
                      
                    </div>
                    <span>近期比赛</span>
                </div> 
                 <div id="act1" class="gongneng2" @click="baoming">
                    <div class="actright"> 
                      <img height="100" width="100" src="https://img1.baidu.com/it/u=1274923228,4135729797&fm=253&fmt=auto&app=138&f=JPEG?w=670&h=360">
                      
                    </div>
                    <span>老年活动</span>
                </div>
                 <div id="act2" class="gongneng2" @click="baoming">
                    <div class="actright"> 
                       <img height="100" width="100" src="https://img2.baidu.com/it/u=27589547,2243596078&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500">
                      
                    </div>
                    <span>幼儿课程</span>
                </div>
            </div> 

           <div>
              <hr>
              <span>所有活动</span>
            
          
           
 

		<div class="commodity">
			<!--// 左侧导航内容 -->
			<div class="leftNav">
				<ul>
					<li v-for="(item, index) in shopList" :key="index" :class="{ typeStyle: index === currentIndex }"
						@click="onClickNav(index)">
						<span class="leftTit">{{ item.shopName }}</span>
					</li>
				</ul>
			</div>
			<!--// 右侧商品内容 -->
			<div class="rightContant">
				<ul ref="shopContant">
					<li class="eventList" v-for="(item, index) in shopList" :key="index">
						<div class="rightTtitle">{{ item.shopName }}</div>
						<ul>
							<li class="gather" v-for="(item, index) in item.shopGather" :key="index">
								<div>
									<img :src="item.shopImgUrl" />
								</div>
								<div class="distance">
									<div class="shopName">🔈{{ item.shopName }}</div>
									<div class="saleGood">
										<span>⌚{{ item.monthNum }}</span>
										<span>已公示{{ item.reputation }}</span>
									</div>
								
								</div>
							</li>
							<div style="height:1px"></div>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
	 <!-- 底部 -->
     <div id="footer">
            <div class="foot"  @click="shequgonggongfuwu">
                    <div class="topright"> 
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shouye"></use>
                        </svg>
                    </div>
                    <span >首页</span>
                </div>
				
                <div class="foot" @click="jiaoyukecheng">
                    <div class="topright"> 
                      
          <el-icon size="36" class="el-input__icon" ><Star style="width: 1em; height: 1em; margin-right: 8px" /></el-icon>
      
                    </div>
                   活动 
                </div>
                <div class="foot" @click="gerenxinxi">
                    <div class="topright"> 
                   <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-31wode"></use>
                        </svg> </div>
                    <span>我的</span>
                </div>
        </div>
  </div> 

  <!-- </div> -->
  
	
</template>

<style scoped>
.allbuju{
   height: 844px;
}

.function{
    width: 80%;
    margin: auto;
    display: flex;   
    padding:10px 0 ;           
    justify-content: space-between; 
    align-items: center;
}
.demonstration {
 color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
 color: #ffdd88;
 opacity: 0.75;
 line-height: 150px;
 margin: 0;
 text-align: center;
}

.el-carousel__item:nth-child(2n) {
 background-color: #ffcf56;
}

.el-carousel__item:nth-child(2n + 1) {
 background-color: #ffdd88;
}
.commodity {
		/* 最大的盒子样式 */
		display: flex;
		 height: 384px;
		top: 300px;
		bottom: 0px;
		width: 390px;
		background: #fff;
		overflow: hidden;
	}


	.leftNav {
		/* 左侧大盒子的整体样式 */
		width: 100px;
		background: rgb(248, 248, 248);
	}

	.typeStyle {
		/* 左侧导航选中的样式 */
		background: #fff;
		font-weight: bold;
		display: flex;
		align-items: center;
		color: rgb(255, 94, 121);
		justify-content: center;
		border-left: 0px solid rgb(255, 94, 121);
	}

	.leftTit {
		/* 左侧导航标题默认样式 */
		display: flex;
		height: 40px;
		justify-content: center;
		font-size: 12px;
		align-items: center;
	}

	.rightContant {
		/* 右侧大盒子的整体样式 */
		flex: 10;
	}

	.rightTtitle {
		/* 右侧标题样式 */
		padding-left: 1px;
		height: 26px;
		line-height: 26px;
		font-size: 12px;
		font-weight: bold;
		color: rgb(147, 153, 159);
		background: rgb(248, 248, 248);
		margin: 0;
	}
.gongneng2 img{
	border:1px solid #ffcf56;
	border-radius: 10px 5px;
}
	.gather {
		/* 右侧每一个活动的样式 */
		display: flex;
		margin: 1px;
		display: flex;
		align-items: center;
	}

	.distance {
		/* 右侧图片与描述间距 */
		padding-left: 6px;
	}

	.gather img {
		/* 右侧图片样式 */
		width: 50px;
		height: 60px;
		
	}

	:last-child {list-style: none;
		/* 点击左侧导航右侧内容与左边对齐 */
		margin-bottom: 0;
	}

	.shopName {
		/* 右侧活动标题字体大小 */
		font-size: 14px;
	}

	.saleGood {
		/* 右侧时间样式 */
		font-size: 10px;
		color: rgb(147, 153, 159);
		padding: 4px 0px;
	}

	.saleGood span:first-child {
		/* 公式样式 */
		padding-right: 19px;
	}



#footer{
    width: 100%;
    height: 60px;
    background: rgb(216, 239, 216);
    display: flex;               
    justify-content: space-between;
    align-items: center;
}
.foot{
    padding: 5px;
}
span{
    margin-left: 9px;
}

</style>

<script>
import BScroll from "better-scroll"; //引入BScroll插件
import Top from '@/components/Top.vue'
// 引入跑马灯组件
import { Vue3Marquee } from 'vue3-marquee'

export default {  

  name: 'shequgonggongfuwu',  
 
  components: {
    Top, 
  }, 


data(){
  return{
 
items:[
{
imgurl:require("@/assets/index/16pic_610812_b.jpg")
 } ,
{
imgurl:require("@/assets/index/16pic_754489_b.jpg")
} ,
{
imgurl:require("@/assets/index/16pic_4731830_b.jpg")
 } ,
{
imgurl:require("@/assets/index/16pic_5576642_b.jpg")
 } 
 ],
 	scrollY: 0, // 右侧滑动的时候距离顶部的值
				rightSide: [], // 所有右侧分类li的top组成的数组  (列表第一次显示后就不再变化)
        	//模拟的商品数据
				shopList: [{
						shopName: "全部",
						shopGather: [{
								shopImgUrl:  require("@/assets/index/a6efce1b9d16fdfad1ef3ab4ebf7655e95ee7b68.png"),
								shopName: "2022年度珠海市践行两邻理念专项科研课题",
								monthNum: "2022年11月30日",
								reputation: 98,
								price: 2,
							},
							{
								shopImgUrl: require("@/assets/index/331.png"),
								shopName: "珠海星湾社区开展“消防安全护校园”活动",
								monthNum:"2022年12月30日" ,
								reputation: 99,
								price: 56.85,
							},
							{
								shopImgUrl: require("@/assets/index/a6efce1b9d16fdfad1ef3ab4ebf7655e95ee7b68.png"),
								shopName: "珠海湾仔街道举行社区公益服务项目交流会",
								monthNum:"2022年1月11日",
								reputation: 90,
								price: 23.9,
							},
							{
								shopImgUrl: require("@/assets/index/1000.png"),
								shopName:"特殊的生日会" ,
								monthNum:"2022年11月30日" ,
								reputation: 85,
								price: 125,
							},
					
						
						]
					},
					{
						shopName: "社区篮球赛",
						shopGather: [{
								
								shopImgUrl: require("@/assets/index/331.png"),
								shopName: "珠海星湾社区开展“消防安全护校园”活动",
								monthNum:"2022年12月30日" ,
								reputation: 99,
								price: 56.85,
							},
							{
								shopImgUrl: require("@/assets/index/a6efce1b9d16fdfad1ef3ab4ebf7655e95ee7b68.png"),
								shopName: "珠海湾仔街道举行社区公益服务项目交流会",
								monthNum:"2022年1月11日",
								reputation: 90,
								price: 23.9,
							},
							
						
						
						]
					},
					{
						shopName: "幼儿成长选拔",
						shopGather: [{
								
								shopImgUrl: require("@/assets/index/331.png"),
								shopName: "珠海星湾社区开展“消防安全护校园”活动",
								monthNum:"2022年12月30日" ,
								reputation: 99,
								price: 56.85,
							},
							{
								shopImgUrl: require("@/assets/index/a6efce1b9d16fdfad1ef3ab4ebf7655e95ee7b68.png"),
								shopName: "珠海湾仔街道举行社区公益服务项目交流会",
								monthNum:"2022年1月11日",
								reputation: 90,
								price: 23.9,
							},
							
						
						
						]
					},
					{
						shopName: "微积分课程大赛",
						shopGather: [{
								
								shopImgUrl: require("@/assets/index/331.png"),
								shopName: "珠海星湾社区开展“消防安全护校园”活动",
								monthNum:"2022年12月30日" ,
								reputation: 99,
								price: 56.85,
							},
							{
								shopImgUrl: require("@/assets/index/a6efce1b9d16fdfad1ef3ab4ebf7655e95ee7b68.png"),
								shopName: "珠海湾仔街道举行社区公益服务项目交流会",
								monthNum:"2022年1月11日",
								reputation: 90,
								price: 23.9,
							},
							
						
						
						]
					},
					{
						shopName: "能者为师",
						shopGather: [{
							shopImgUrl:require("@/assets/index/1000.png"),
								shopName: "2022年度珠海市践行两邻理念专项科研课题",
								monthNum: "2022年11月30日",
								reputation: 98,
								price: 2,
							},
							{
							shopImgUrl:  require("@/assets/index/a6efce1b9d16fdfad1ef3ab4ebf7655e95ee7b68.png"),
								shopName: "2022年度珠海市践行两邻理念专项科研课题",
								monthNum: "2022年11月30日",
								reputation: 98,
								price: 2,
							},
							{
							shopImgUrl: require("@/assets/index/1000.png"),
								shopName: "2022年度珠海市践行两邻理念专项科研课题",
								monthNum: "2022年11月30日",
								reputation: 98,
								price: 2,
							},
							{
								shopImgUrl: require("@/assets/index/331.png"),
								shopName: "珠海星湾社区开展“消防安全护校园”活动",
								monthNum:"2022年12月30日" ,
								reputation: 99,
								price: 56.85,
							},
							{
								shopImgUrl: require("@/assets/index/a6efce1b9d16fdfad1ef3ab4ebf7655e95ee7b68.png"),
								shopName: "珠海湾仔街道举行社区公益服务项目交流会",
								monthNum:"2022年1月11日",
								reputation: 90,
								price: 23.9,
							},
					
					
						]
					},
					{
						shopName: "职业教育",
						shopGather: [{
								
								shopImgUrl: require("@/assets/index/331.png"),
								shopName: "珠海星湾社区开展“消防安全护校园”活动",
								monthNum:"2022年12月30日" ,
								reputation: 99,
								price: 56.85,
							},
							{
								shopImgUrl: require("@/assets/index/a6efce1b9d16fdfad1ef3ab4ebf7655e95ee7b68.png"),
								shopName: "珠海湾仔街道举行社区公益服务项目交流会",
								monthNum:"2022年1月11日",
								reputation: 90,
								price: 23.9,
							},
							
						
						
						]
					},
					{
						shopName: "专项科研",
						shopGather: [{
								
								shopImgUrl: require("@/assets/index/331.png"),
								shopName: "珠海星湾社区开展“消防安全护校园”活动",
								monthNum:"2022年12月30日" ,
								reputation: 99,
								price: 56.85,
							},
							{
								shopImgUrl: require("@/assets/index/a6efce1b9d16fdfad1ef3ab4ebf7655e95ee7b68.png"),
								shopName: "珠海湾仔街道举行社区公益服务项目交流会",
								monthNum:"2022年1月11日",
								reputation: 90,
								price: 23.9,
							},
							
						
						
						]
					},
					{
						shopName: "2020年居民大赛",
						shopGather: [{
								
								shopImgUrl: require("@/assets/index/331.png"),
								shopName: "珠海星湾社区开展“消防安全护校园”活动",
								monthNum:"2022年12月30日" ,
								reputation: 99,
								price: 56.85,
							},
							{
								shopImgUrl: require("@/assets/index/a6efce1b9d16fdfad1ef3ab4ebf7655e95ee7b68.png"),
								shopName: "珠海湾仔街道举行社区公益服务项目交流会",
								monthNum:"2022年1月11日",
								reputation: 90,
								price: 23.9,
							},
							
						
						
						]
					},
					{
						shopName: "智慧助老",
						shopGather: [{
								
								shopImgUrl: require("@/assets/index/331.png"),
								shopName: "珠海星湾社区开展“消防安全护校园”活动",
								monthNum:"2022年12月30日" ,
								reputation: 99,
								price: 56.85,
							},
							{
								shopImgUrl: require("@/assets/index/a6efce1b9d16fdfad1ef3ab4ebf7655e95ee7b68.png"),
								shopName: "珠海湾仔街道举行社区公益服务项目交流会",
								monthNum:"2022年1月11日",
								reputation: 90,
								price: 23.9,
							},
							
						
						
						]
					},
					{
						shopName: "智慧教学",
						shopGather: [	{
								shopImgUrl: require("@/assets/index/331.png"),
								shopName: "珠海唐家湾社区开展“学习计划”活动",
								monthNum:"2022年12月30日" ,
								reputation: 99,
								price: 56.85,
							},
							{
								shopImgUrl: require("@/assets/index/a6efce1b9d16fdfad1ef3ab4ebf7655e95ee7b68.png"),
								shopName: "珠海湾仔街道举行我是学习小能手交流会",
								monthNum:"2022年1月11日",
								reputation: 90,
								price: 23.9,
							},
							{
								shopImgUrl: require("@/assets/index/331.png"),
								shopName: "珠海星湾社区开展快乐学习活动",
								monthNum:"2022年12月30日" ,
								reputation: 99,
								price: 56.85,
							},
							{
								shopImgUrl: require("@/assets/index/a6efce1b9d16fdfad1ef3ab4ebf7655e95ee7b68.png"),
								shopName: "珠海湾仔街道举行社区公益服务项目交流会",
								monthNum:"2022年1月11日",
								reputation: 90,
								price: 23.9,
							},
							{
								shopImgUrl: require("@/assets/index/331.png"),
								shopName: "珠海香洲举行乐于助人活动",
								monthNum:"2022年12月30日" ,
								reputation: 99,
								price: 56.85,
							},
							{
								shopImgUrl: require("@/assets/index/a6efce1b9d16fdfad1ef3ab4ebf7655e95ee7b68.png"),
								shopName: "珠海唐家湾举行粤港澳见面交流会",
								monthNum:"2022年1月11日",
								reputation: 90,
								price: 23.9,
							},
							{
								shopImgUrl: require("@/assets/index/331.png"),
								shopName: "珠海星湾社区喜迎新年活动",
								monthNum:"2022年12月30日" ,
								reputation: 99,
								price: 56.85,
							},
							{
								shopImgUrl: require("@/assets/index/a6efce1b9d16fdfad1ef3ab4ebf7655e95ee7b68.png"),
								shopName: "珠海湾仔街道举行社区同伴交流会",
								monthNum:"2022年1月11日",
								reputation: 90,
								price: 23.9,
							},
								{
								shopImgUrl: require("@/assets/index/331.png"),
								shopName: "珠海BNUZ开展“我爱我家”活动",
								monthNum:"2022年12月30日" ,
								reputation: 99,
								price: 56.85,
							},
							{
								shopImgUrl: require("@/assets/index/a6efce1b9d16fdfad1ef3ab4ebf7655e95ee7b68.png"),
								shopName: "珠海北理工举行能者为师交流会",
								monthNum:"2022年1月11日",
								reputation: 90,
								price: 23.9,
							},
								{
								shopImgUrl: require("@/assets/index/331.png"),
								shopName: "珠海消防队开展“消防安全护校园”活动",
								monthNum:"2022年12月30日" ,
								reputation: 99,
								price: 56.85,
							},
							{
								shopImgUrl: require("@/assets/index/a6efce1b9d16fdfad1ef3ab4ebf7655e95ee7b68.png"),
								shopName: "珠海湾仔街道举行社区公益服务项目交流会",
								monthNum:"2022年1月11日",
								reputation: 90,
								price: 23.9,
							},
						{
								shopImgUrl: require("@/assets/index/331.png"),
								shopName: "珠海星湾社区开展“消防安全护校园”活动",
								monthNum:"2022年12月30日" ,
								reputation: 99,
								price: 56.85,
							},
							{
								shopImgUrl: require("@/assets/index/a6efce1b9d16fdfad1ef3ab4ebf7655e95ee7b68.png"),
								shopName: "珠海湾仔街道举行社区公益服务项目交流会",
								monthNum:"2022年1月11日",
								reputation: 90,
								price: 23.9,
							},
						]
					}
				]
 }
 },

	mounted() {
			this.initializeRoll(); //滑动初始化方法
			this.initializeOwn(); //初始化rightSide方法
		},
    	//计算属性
		computed: {
			// 计算出当前分类的下标
			currentIndex() {
				const {
					scrollY,
					rightSide
				} = this; //拿到每次滑动的值以及每一个分类的下标值
				console.log('滚动的值及每一个分类的下标值...', this)
				//findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置
				//获取数组rightSide中每一个下标值并筛选条件返回第一个元素索引位置
				const index = rightSide.findIndex((top, index) => {
					// scrollY>=当前top && scrollY<下一个top
					return scrollY >= top && scrollY < rightSide[index + 1];
				});
				// 返回结果
				return index;
			}
		},
		methods: {
			 
        jiaoyukecheng:function(){
            this.$router.replace('/jiaoyukecheng')
        },
		 shequgonggongfuwu:function(){
            this.$router.replace('/shequgonggongfuwu')
        },
		 gerenxinxi:function(){
            this.$router.replace('/gerenxinxi')
        },
		 baoming:function(){
            this.$router.replace('/baoming')
        },
			// 初始化滚动
			initializeRoll() {
				// new一个类的实例，前提必须确保父元素和子元素的内容已经正确渲染了，不然不会生效
				new BScroll(".leftNav", {
					click: true
				});
				// 组件实例上挂属性
				this.foodsScroll = new BScroll(".rightContant", {
					probeType: 2, // 因为惯性滑动不会触发
					click: true
				});

				// 给右侧列表绑定scroll监听
				this.foodsScroll.on("scroll", ({
					x,
					y
				}) => {
					this.scrollY = Math.abs(y);
				});
				// 给右侧列表绑定scroll结束的监听
				this.foodsScroll.on("scrollEnd", ({
					x,
					y
				}) => {
					console.log("操作结束的下标值" + x, y);
					this.scrollY = Math.abs(y);
				});
			},
			// 初始化rightSide
			initializeOwn() {
				// 初始化rightSide
				const rightSide = [];
				let top = 0;
				rightSide.push(top);
				// 找到所有分类下的li
				const lis = this.$refs.shopContant.getElementsByClassName("eventList"); //获取dom元素lii（eventList），对其进行操作
				// slice() 方法返回一个新的数组对象
				Array.prototype.slice.call(lis).forEach(li => {
					top += li.clientHeight; //相当于top = top + li.clientHeight
					rightSide.push(top);
				});

				//更新数据
				this.rightSide = rightSide;
				console.log("每一个分类的下标" + rightSide);
			},
			//左侧点击事件
			onClickNav(index) {
				console.log(index);
				//拿到目标位置的scrollY，点击左侧导航，右侧列表滑动到对应的位置
				const scrollY = this.rightSide[index];
				// 点击的分类成为当前分类，索引当前选中的导航标题
				this.scrollY = scrollY;
				// 平滑滑动右侧列表
				this.foodsScroll.scrollTo(0, -scrollY, 1000);
			}
		}
	};


	
		
			
			
	
	
	


</script>

<script setup>import { ref } from 'vue'
import  {Star} from '@element-plus/icons-vue'
const input = ref('')
const fits = ['fill', 'contain', 'cover']
const url =
  'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp9.itc.cn%2Fq_70%2Fimages03%2F20210729%2F54fe36c4c0e34f9c91151c297b691047.jpeg&refer=http%3A%2F%2Fp9.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672487681&t=3f6ace2dd025b1d902663dbf8ad99782'



</script>

